<!-- 我的 -->
<template>
    <div id="mine">
        <!-- 头部 -->
       <div class="mineHeader">
           <!-- 登录头像 -->
           <div class="minePortrait">
               <div class="headPortrait"></div>
               <div class="mineLogin" @click="$router.push('/login')" >
                    <span v-show="val!=val">登录/注册</span>   
                    <span>{{val}}{{pho}}</span>   
                </div>
           </div>
           <!-- 右上角的icon -->
           <div class="mineIcon">
               <i class="fa fa-qrcode" style="font-size:1.5rem;color:white"></i>
               <i class="fa fa-bell-o" style="font-size:1.5rem;color:white"></i>
           </div>
           <!-- 右下角的图片 -->
           <div class="mainRimg"></div>
       </div>
        <!-- 我的钱包列表 -->
        <div class="mineWallet">
            <ul>
                <li>
                    <img src="/static/icon_packet.png" alt="">
                    <p>我的钱包</p>
                </li>
                <li>
                    <p class="mineLine">--</p>
                    <p>优惠券</p>
                </li>
                <li>
                    <p class="mineLine">--</p>
                    <p>白条</p>
                </li>
                <li>
                    <p class="mineLine">--</p>
                    <p>鲜豆</p>
                </li>
            </ul>
        </div>
        <!-- 中间空隙 -->
        <div class="mineEmpty"></div>
        <!-- 立即拆开红包 -->
        <div class="mineHB">
            <div class="mineHBimg">
                <img src="/static/3.png" alt="">
            </div>
            <ul>
                <li>
                    <img src="/static/i1.png" alt="">
                    <p>我的关注</p>
                </li>
                 <li>
                    <img src="/static/i2.png" alt="">
                    <p>我的评价</p>
                </li>
                 <li>
                    <img src="/static/i3.png" alt="">
                    <p>我的地址</p>
                </li>
                 <li>
                    <img src="/static/i4.png">
                    <p >会员减运费</p>
                </li>
               
            </ul>
        </div>
        <!-- 签到有惊喜 -->
        <div class="mineHB mineSuprise">
            <ul>
                <li>
                    <img src="/static/i5.png">
                    <p>签到有惊喜</p>
                </li>
                    <li>
                    <img src="/static/i6.png" alt="">
                    <p>退款/售后</p>
                </li>
                    <li>
                    <img src="/static/i7.png" alt="">
                    <p>客服反馈</p>
                </li>
                    <li>
                    <img src="/static/i8.png" alt="">
                    <p>帮助中心</p>
                </li>    
            </ul>
        </div>
        <!-- 办公室超市 -->
        <div class="mineHB mineus">
            <ul id="mineLast">
                <li>
                    <img src="/static/i9.png">
                    <p>办公室超市</p>
                </li>
                    <li>
                    <img src="/static/i10.png" alt="">
                    <p>配送员注册</p>
                </li>
                    <li>
                    <img src="/static/i11.png" alt="">
                    <p>关于我们</p>
                </li>   
            </ul>
        </div>
        <!-- 中间空隙 -->
        <div class="mineEmpty"></div>

        <!-- 退出登录 -->
        <div id="mineOutLogin" v-show="val!='登录'" @click="$router.push('/login')">
        退出登录
        </div>
         <!-- 中间空隙 -->
        <div class="mineEmpty mineEmpty1"></div>
        <bnav active="mine"></bnav>
    </div>
</template>
<script>
import bnav from "@/components/Bnav.vue";
export default {
  props: ["val",'pho'],
  components: {
    bnav
  }
};
</script>
<style>
ul {
  list-style-type: none;
}
.mineHeader {
  width: 100%;
  height: 7rem;
  background-image: url("/static/my_bgnew.png");
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
}
.headPortrait {
  width: 4rem;
  height: 4rem;
  background-image: url("/static/bg_head_new.png");
  background-size: 100% 100%;
}
.minePortrait {
  width: 13rem;
  height: 4rem;
  margin-top: 1rem;
  margin-left: 1rem;
  display: flex;
}
.mineLogin {
  width: auto;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 0.87rem;
  margin-top: 1rem;
  margin-left: 0.5rem;
}
.mineIcon {
  width: 5rem;
  height: 3rem;
  position: absolute;
  top: 0.5rem;
  right: 0;
  display: flex;
  justify-content: space-around;
}
.mainRimg {
  width: 6.375rem;
  height: 4.06rem;
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url("/static/vip_centernew@2x.png");
  background-size: 100% 100%;
}
.mineWallet {
  width: 100%;
  height: 4rem;
  margin-top: 0.5rem;
}
.mineWallet ul {
  display: flex;
  justify-content: space-around;
  font-size: 0.78rem;
  color: #333;
}
.mineWallet img {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 0.6rem;
}
.mineLine {
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 0.6rem;
  font-size: 1rem;
}
.mineEmpty {
  width: 100%;
  height: 0.6rem;
  background-color: #f4f4f4;
}
.mineHB {
  width: 100%;
  height: 9.5rem;
  border-bottom: 0.05rem solid #ddd;
  margin-top: 0.5rem;
}
.mineHBimg {
  width: 100%;
  height: 4rem;
}
.mineHBimg img {
  width: 100%;
  height: 100%;
}
.mineHB ul {
  width: 100%;
  height: 5rem;
  display: flex;
  justify-content: space-around;
}
.mineHB ul img {
  width: 3rem;
  height: 3rem;
  margin-left: 0rem;
}
.mineHB ul p {
  font-size: 0.78rem;
  color: #333;
}
.mineSuprise {
  height: 6rem;
  border-bottom: 0.05rem solid #ddd;
}
#mineLast {
  width: 15.5rem;
  height: 100%;
}
.mineus {
  height: 6rem;
  border-bottom: 0.05rem solid #ddd;
}
#mineOutLogin {
  width: 20rem;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  color: #ff5757;
}
.mineEmpty1 {
  margin-bottom: 3.125rem;
}
</style>


